<template>
	<view class="main-cont box box-tb box-pack-start box-align-center">
		<view class="top box box-tb box-pack-center">
			<view class="search box box-align-center box-pack-start mt20">
				<u-input v-model="searchtext" type="text" :border="border" :custom-style="customStyle" placeholder="搜索班级" />
				<u-image src="@/static/class/icon_search.png" width="34rpx" height="34rpx" @click="searchclass">
					<u-loading slot="loading"></u-loading>
				</u-image>
			</view>
			<view class="box box-align-center box-pack-between mt15 create">
				<view class="box box-align-center" @click="show = true">
					<view class="zy-cont">{{zyTitle}}</view>
					<u-icon name="arrow-down-fill"></u-icon>
				</view>
				<u-action-sheet :list="zyList" v-model="show" @click="selectZy" z-index="1075"></u-action-sheet>
				<view class="" style="color: #626BF1;" @click="createClass">
					创建+
				</view>
			</view>
		</view>

		<u-modal v-model="createShow" @confirm="confirm" width="75%" ref="uModal" title="创建班级" :show-cancel-button="true"  z-index="1074">
			<view class="slot-content">
				<u-form :model="form">
					<u-form-item label="学级" prop="xj">
						<view class="box box-align-center" @click="xjShow = true">
							<view class="zy-cont">{{form.xj}}</view>
							<u-icon name="arrow-down-fill"></u-icon>
						</view>
						<u-action-sheet :list="xjList" v-model="xjShow" @click="selectXj" z-index="1075"></u-action-sheet>
					</u-form-item>
					<u-form-item label="姓名" prop="className">
						<u-input v-model="form.className" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
		<view class="bjlist" v-if="classList.length !=0">
			<view class="list box box-align-center box-pack-between mt20" v-for="(item,index) in classList" :key="index"
				@click="goStuList(item)">
				<view class="left box box-align-center box-pack-start">
					<view class="icon"></view>
					<view class="ml15  box box-tb box-align-start">
						<view class="class-name">
							{{item.name}}
						</view>
						<view class="mt10 tab box box-align-center box-pack-center">
							<u-image src="/static/home/icon_group1.png" width="30rpx" height="26rpx"></u-image>
							<view class="ml10">
								{{item.num}}人
							</view>
						</view>
					</view>
				</view>
				<view class="box box-align-center">
					<view class="mr10 tr-name">
						{{item.trName==null?"":item.trName}}
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<no-data title="暂无数据" v-else class="nodata"></no-data>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currSchool:uni.getStorageSync('currSchool'),
				user: uni.getStorageSync("user"),
				classList: [],
				classId:'',
				customStyle: {
					width: "560rpx",
					padding: "40rpx",
					color: "#000"
				},
				form: {
					className: '',
					xj: '',
					xjValue:''
				},
				zyTitle: '',
				type: 'select',
				show: false,
				borders: false,
				zyValue:'',
				zyList: [],
				createShow: false,
				pzydm:'',//页面传递参数
				pzymc:'',//页面传递参数
				searchtext:''
			}
		},
		onShow() {
			this.getZyList();
		},
		onLoad(opt) {
			if(opt.zydm!=undefined){
				this.pzydm=opt.zydm;
				this.pzymc=opt.zymc;
				this.getZyList();
			}
		},
		methods: {
			getZyList() {
				this.$api.post({url: '/dzy/listZy'}, { schoolid: this.currSchool.id }).then(res => {
					this.zyList = res.list.map(r=>{return{text:r.label,value:r.value}})
					//console.log(this.zyList)
						// 默认专业
					if(this.pzydm==''){
						//console.log(1)
						this.zyValue=res.list[0].value;
						this.zyTitle=res.list[0].label;
					}else{
						this.zyValue=this.pzydm;
						this.zyTitle=this.pzymc;
					}
					this.getClassList();
				})
			},
			selectZy(e){
				this.zyValue = this.zyList[e].value
				this.zyTitle = this.zyList[e].text
				this.getClassList()
			},
			getClassList() {
				this.$api.post({url:'/dclass/listClassByZy'}, {schoolid: this.currSchool.id,zydm:this.zyValue,bjmc:this.searchtext}).then(res => {
						this.classList = res.list
				})
			},
			searchclass(){
				wx.vibrateShort();
				this.getClassList();
			},
			goStuList(item) {
				//console.log(item);
				uni.navigateTo({ url: "/team/bj/stuList?classid=" + item.id + "&bjmc=" + item.name + "&stuNum=" + item.num })
			},
			actionSheetCallback(e) {
				this.value = this.actionSheetList[e].text
			},
			confirm() {
				setTimeout(() => {
					this.createShow = false;
					this.$refs.uModal.clearLoading();
				}, 3000)
			},
			selectXj(e){
				//console.log(e);
				this.form.xjValue = this.xjList[e].text
			},
			createClass(){
				wx.vibrateShort();
				uni.navigateTo({
					url: "/team/bj/createClass?zydm="+this.zyValue
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.top {
		width: 100%;
		background-color: #fff;
		padding-bottom: 25rpx;
	}

	.search {
		width: 710rpx;
		height: 86rpx;
		background: #F3F4FB;
		border-radius: 43rpx;
	}

	.create { 
		padding: 5rpx 40rpx;
	}
	
	.bjlist{
		// height: 470px;
		overflow-y: scroll;
	}

	.main-cont {
		width: 100%;
		height: 100%;

		.list {
			padding: 0 39rpx;
			margin: 10rpx 30rpx;
			width: 690rpx;
			height: 236rpx;
			background: #FFFFFF;
			box-shadow: 0px 23rpx 46rpx 0px rgba(205, 207, 230, 0.18);
			border-radius: 30rpx;

			.icon {
				width: 14rpx;
				height: 128rpx;
				background: #8A8DF3;
				box-shadow: 4rpx 1rpx 13rpx 0px #626BF1;
				border-radius: 7rpx;
			}

			.class-name {
				font-size: 38rpx;
				font-weight: bold;
			}

			.tab {
				width: 124rpx;
				height: 34rpx;
				line-height: 34rpx;
				border-radius: 10rpx;
				text-align: left;
				font-size: 26rpx;
				color: #6E73D8;
			}

			&:nth-child(2n) {
				.icon {
					background: #FE907E;
					box-shadow: 4rpx 1rpx 13rpx 0px #FE907E;
				}
			}
		}

		.tr-name {
			font-size: 26rpx;
			color: #6E73D8;
		}

		.zy-cont {
			width: 154rpx;
			padding: 5rpx 10rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		.slot-content {
			padding: 0 40rpx;
		}
	}
</style>